<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item label="渠道商" prop="useruuid">
                    <el-select v-model="filters.useruuid" placeholder="请选择渠道商"  collapse-tags filterable>
                        <el-option value="0" label="全部">全部</el-option>
                        <el-option
                                v-for="item in users"
                                :key="item.user.useruuid"
                                :label="item.user.username"
                                :value="item.user.useruuid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间:">
                    <el-date-picker type="date" placeholder="开始时间" format="yyyy-MM-dd" v-model="filters.rechargetime"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间:">
                    <el-date-picker type="date" placeholder="结束时间" format="yyyy-MM-dd" v-model="filters.endtime"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="records" highlight-current-row v-loading="listLoading"  border  max-height="620" style="width: 100%;">
            <el-table-column type="index" width="80" label="编号">
            </el-table-column>
            <el-table-column prop="username" label="充值渠道商名称" show-overflow-tooltip >
            </el-table-column>
            <el-table-column prop="rechargeamount" label="充值总金额" show-overflow-tooltip >
            </el-table-column>

        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total,sizes,prev, pager, next"
                :total="total">
        </el-pagination>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    import {downRechargeRecordCount, findAllDownShopInfo} from '../../api/api';

    export default {
        data() {
            return {
                filters: {
                    username: '',
                    rechargeamount: '',
                    rechargetime: '',
                    endtime:'',
                    useruuid: ''
                },
                records: [],
                total: 0,
                start: 0,
                pageSize: 10,
                listLoading: false,
                users: []
            }
        },
        methods: {
            //性别显示转换
            formatStatus: function (row, column) {
                return row.rechargestatus == 1 ? '充值成功' : row.sex == 0 ? '充值失败' : '未知';
            },
            formatPayType: function (row, column) {
                return row.payType ==  1 ? '充值' : row.payType == 2 ? '扣款' : '未知';
            } ,
            downRechargeRecordCount() {
                let para = {
                    start: this.start,
                    pageSize: this.pageSize,
                    starttime: this.filters.rechargetime = (!this.filters.rechargetime || this.filters.rechargetime == '') ? '' : util.formatDate.format(new Date(this.filters.rechargetime), 'yyyy-MM-dd'),
                    endtime:this.filters.endtime = (!this.filters.endtime || this.filters.endtime == '') ? '' : util.formatDate.format(new Date(this.filters.endtime), 'yyyy-MM-dd'),
                    useruuid: this.filters.useruuid == "0" ? "" :this.filters.useruuid
                };
                this.listLoading = true;
                downRechargeRecordCount(para).then((datas) => {
                    this.listLoading = false;
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.records = data.result;
                        this.total = data.totalCount;
                    }
                });
            }, findAllDownShopInfo: function () {
                let para = {useruuid:JSON.parse(sessionStorage.getItem("user")).useruuid};
                findAllDownShopInfo(para).then(datas => {
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.users =   data;
                    }
                });

            }, handleCurrentChange: function (val) {
                this.start = val ;
                this.downRechargeRecordCount();
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.downRechargeRecordCount();
            }
        },
        mounted() {
            this.findAllDownShopInfo();
            this.downRechargeRecordCount();
        }
    }

</script>

<style scoped>

</style>
